<template>
	<div class="ds-context-menu-section" v-click-out-side="onClose" :style="{	top: props.position.y + 'px',left: props.position.x + 'px'}">
		<transition name="bounce">
		<!-- <transition enter-active-class="enterAnimation" leave-active-class="leaveAnimation" > -->
			<div class="ds-context-menu" v-show="props.display">
				<ul>
					<li	v-for="item in list" :key="item.id" :class="{ disabled: item.disabled, divide: item.type == 'divide', 'list-item': item.type !== 'divide' }" @mousedown="onClick(item)"	>
						<div class="ds-context-menu-item" @mouseenter="onMouseEnter(item,$event)" @mouseleave="onMouseLeave(item)">
							<i v-show="item.type!='divide'" class="icon" :class="item.icon" aria-hidden="true"></i>
							<span>{{ item.text }}</span>
							<template v-if="item.sub && item.sub.length > 0">
								<span style="flex:1"></span>
								<span style="align-self:flex-end;">＞</span>
							</template>
						</div>
					</li>
				</ul>
			</div>
		</transition>
	</div>
	<div class="ds-context-sub-menu-section"  :style="{	top: (sub.position.y) + 'px',left: (sub.position.x) + 'px'}">
		<transition name="bounce">
			<div class="ds-context-menu" v-show="props.display && sub.display">
				<ul>
					<li	v-for="item in sub.list" :key="item.id" :class="{ disabled: item.disabled, divide: item.type == 'divide', 'list-item': item.type !== 'divide' }" @mousedown="onClick(item)"	>
						<div class="ds-context-menu-item">
							<i v-show="item.type!='divide'" class="icon" :class="item.icon" aria-hidden="true"></i>
							<span>{{ item.text }}</span>
						</div>
					</li>
				</ul>
			</div>
		</transition>
	</div>
</template>
<script setup>
	import {defineProps,reactive,onMounted,computed,watch} from 'vue';
	import coreStore from '../stores/core.js';
	import WidgetUtil from '../utils/WidgetUtil.js';
	import clickOutside from '../directives/clickOutside.js';
	import MENU from '@/meta/menu.js';
	
	const $coreStore = coreStore();
	const vClickOutSide = clickOutside;
	const props = defineProps({
		display:{
			type:Boolean,
			default:false
		},
		position:{
			type:Object,
			default:{x:0,y:0}
		}
	});
	
	const sub = reactive({
		display:false,
		list:[],
		position:{x:0,y:0}
	});
	
	onMounted(()=>{
		console.log("-> init ContextMenu");
	});
	
	watch(props, (newVal, oldVal) => {
		sub.display = false;
		let object = MENU.wall.filter(t => t.id == '6')[0];
		object.text = WidgetUtil.isFullscreen() ? '退出全屏':'全屏';
	});
	
	const list = computed(()=> {
		if ($coreStore.contextMenu.type ==='wall') {
			return MENU.wall;
		} else {
			return MENU.icon;
		}
	});
	
	const onMouseEnter = function(item,event) {
		let ww = document.body.clientWidth;
		let hh = document.body.clientHeight;
		let w = event.target.offsetWidth;
		let h = event.target.offsetHeight;
		let x = event.clientX;
		let y = event.clientY;
		let X = x + w;
		//console.log("clientWidth:" + ww + "   clientHeight:" + hh);
		//console.log("w:" + w + "   clientHeight:" + h);
		//console.log("-> ponit" + x + "====" + y);
		//console.log("-> X" + (w+x) + "====Y" + (h+y));
		//console.log(event.target.offsetWidth + "==" +  JSON.stringify(event.target.offsetHeight) );
		if(item.sub && item.sub.length > 0) {
			sub.display = true;
			sub.list= item.sub;
			sub.position.x = X > ww ? (props.position.x-w):(props.position.x + w);
			sub.position.y = event.clientY;
		} else {
			sub.display = false;
		}
	}
	
	const onMouseLeave = function(item) {
		
	}
	
	const onClick=function(item) {
		let data = $coreStore.contextMenu.data;
		$coreStore.closeContextMenu();
		if(typeof(item.action) == 'function') {
			item.action(data);
			return ;
		}
		if(!item.linkId == '') {
			$coreStore.openApplication(item.linkId);
		} else {
			$coreStore.openApplication(data.id);
		}
	}
	const onClose = function() {
		$coreStore.closeContextMenu();
	}
</script>

<style lang="less" scoped>
.ds-context-menu-section {
	position: fixed;
	z-index: 998;
}
.ds-context-sub-menu-section {
	position: fixed;
	z-index: 999;
}
.ds-context-menu {
	width: 9rem;
	text-align: left;
	border-style: solid;
	border-width: 0.1rem;
	box-shadow: 2px 2px 10px rgba(12, 67, 101, 0.8);
	ul {
		background: rgba(255, 255, 255, 0.8);
		width: 100%;
		padding: 0.2rem 0;
		margin: 0;
		list-style: none;
		.list-item {
			padding: 0.1rem 0.6rem;
			cursor: default;
			color: #333;
			&:hover {
				background: #4b8de4;
				color: #fff;
			}
			&.disabled {
				color: #999;
			}
			span {
				margin-left: 0.5rem;
			}
		}
		.divide {
			border-top: 1px solid #ccc;
			margin: 5px;
		}
		.icon {
			display: inline-block;
			width: 15px;
			height: 15px;
			background-size: cover;
		}
	}
}
.ds-context-menu-item {
	display: flex;
	flex-wrap: nowrap;
	flex-direction:row;
	justify-content:start;
	align-items: center;
}

.leaveAnimation {
  animation: zoomOut 0.3s;
}
.enterAnimation {
  animation: fadeInRight 0.5s;
}
.bounce-enter-active {
  animation: bounce-in 0.3s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
	opacity: 0;
	transform-origin: 0 0 0;
	transform: scale(0,0);
  }
  100% {
	opacity: 1;
	transform-origin: 0 0 0;
	transform: scale(1,1);
  }
}
</style>
